<template>
	<div class="system_user_wrapper">
		<depart-tree @checked="handleDepartTree"></depart-tree>
		<sw-common-frame class="user" :loading="loading">
			<template slot="button">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
				<template v-if="selectedUser.length > 0">
					<el-button size="small" type="danger" icon="el-icon-delete" plain @click="handleBatchDelete()">批量删除</el-button>
				</template>
			</template>
			<template slot="query">
				<el-form size="small" inline>
					<el-form-item>
						<el-input v-model="queryData.userName" clearable placeholder="用户姓名" style="width: 180px"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="queryData.account" clearable placeholder="用户账号" style="width: 180px"></el-input>
					</el-form-item>
					<el-form-item>
						<el-select v-model="queryData.type" clearable placeholder="用户类型" style="width: 100px">
							<el-option v-for="(item, index) in dictData['USER_TYPE']" :key="index" :label="item.msg" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
					</el-form-item>
				</el-form>
			</template>
			<template slot="table">
				<el-table size="medium" ref="table" :data="tableData" stripe height="100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="48" align="center"></el-table-column>
					<el-table-column label="用户姓名/账号" min-width="160" :formatter="returnUserAccount"></el-table-column>
					<el-table-column label="用户类型" min-width="80" :formatter="returnUserType"></el-table-column>
					<el-table-column prop="deptName" label="用户院系" min-width="150" show-overflow-tooltip></el-table-column>
					<el-table-column label="状态" min-width="70" :formatter="returnUserStatus"></el-table-column>
					<el-table-column prop="createName" label="创建者" min-width="100"></el-table-column>
					<el-table-column prop="createTime" label="创建时间" min-width="110" />
					<el-table-column label="操作" width="150">
						<template slot-scope="{ row }">
							<el-button size="medium" type="text" @click="handleOpenDialog(row.id)">编辑</el-button>
							<el-button size="medium" type="text" @click="handleTableDelete(row)">删除</el-button>
							<el-dropdown class="dropdown" size="medium" trigger="click" @command="handleUserCommand($event, row)">
								<el-button size="medium" type="text">
									更多
									<i class="el-icon-arrow-down"></i>
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="blockedAccount" v-if="row.del === '1'">封禁账号</el-dropdown-item>
									<el-dropdown-item command="recoverAccount" v-if="row.del === '2'">恢复账号</el-dropdown-item>
									<el-dropdown-item command="updatePassword">更改密码</el-dropdown-item>
									<el-dropdown-item command="configRole">配置角色</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<template slot="page">
				<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
			</template>
		</sw-common-frame>
		<form-dialog v-model="formDialog" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
		<config-role v-model="configDialog" :data-id="dataId"></config-role>
	</div>
</template>

<script>
import formDialog from './form';
import departTree from './tree';
import configRole from './configRole';
import listMixins from '@/mixins/listMixins';
import { getUserList, deleteUser, banAndRecoveryUser } from '@/api/system/tbSysUser';
export default {
	mixins: [listMixins],
	enums: ['USER_TYPE'],
	components: { departTree, formDialog, configRole },
	data() {
		return {
			pageName: '用户',
			configDialog: false,
			selectedUser: [],
			treeConfig: {
				ref: 'tree',
				nodeKey: 'id',
				highlightCurrent: true,
				defaultExpandAll: false,
				expandOnClickNode: false,
				props: { label: 'name', children: 'childList' }
			},
			authButtons: []
		};
	},
	computed: {
		listFunction() {
			return eval(getUserList);
		},
		deleteFunction() {
			return eval(deleteUser);
		}
	},
	methods: {
		handleDepartTree(id) {
			if (!id) {
				this.$delete(this.queryData, 'deptId');
			} else {
				this.$set(this.queryData, 'deptId', id);
			}
			this.queryTableData();
		},

		//表格数据删除
		handleTableDelete(data) {
			let params = { ...data, name: data.userName };
			this.handleDeleteData([params]);
		},

		//批量删除数据
		handleBatchDelete() {
			let params = this.selectedUser.map((n) => {
				return { ...n, name: n.userName };
			});
			this.handleDeleteData(params);
		},

		//更多操作
		handleUserCommand(command, data) {
			if (command === 'blockedAccount') {
				this.banAndRecoveryRequest(data.id, 2, '封禁');
			} else if (command === 'recoverAccount') {
				this.banAndRecoveryRequest(data.id, 1, '恢复');
			} else if (command === 'updatePassword') {
				this.$bus.$emit('updatePassword', data.id);
			} else if (command === 'configRole') {
				this.configDialog = true;
				this.dataId = data.id;
			}
		},

		//封禁/恢复请求
		async banAndRecoveryRequest(id, del, title) {
			let params = { id, canUpdate: 1, del };
			let result = await banAndRecoveryUser(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success(`${title}账号成功`);
				this.queryTableData();
			}
		},

		//选中数据项
		handleSelectionChange(selection) {
			this.selectedUser = [...selection];
		},

		//格式化用户姓名账号
		returnUserAccount(data) {
			return [
				this.$createElement('span', { style: { marginRight: '10px', whiteSpace: 'nowrap' } }, data.userName),
				this.$createElement('span', { style: { marginRight: '10px', whiteSpace: 'nowrap' } }, data.account)
			];
		},

		//格式化用户类型
		returnUserType(data) {
			let info = this.dictData['USER_TYPE'].find((n) => n.value === data.type);
			let type = data.type === '1' ? 'info' : data.type === '2' ? 'warning' : 'danger';
			return this.$createElement('elTag', { attrs: { size: 'medium', type } }, !info ? '--' : info.msg);
		},

		//格式化用户状态
		returnUserStatus(data) {
			let message = data.del === '1' ? '正常' : data.del === '2' ? '封禁' : '';
			let type = data.del === '1' ? 'success' : data.del === '2' ? 'danger' : '';
			return this.$createElement('elTag', { attrs: { size: 'medium', type } }, message);
		}
	}
};
</script>
<style lang="scss" scoped>
.system_user_wrapper::v-deep {
	display: flex;
	height: 100%;
	overflow: hidden;
	.user {
		flex: 1;
		overflow: hidden;
	}
}
</style>
